<template>
	<div class="login-contain">
		<div class="main">
			<div class="top">
				<img class="title" src="@img/title@2x-0227cdb2.png" alt="" />
			</div>
			<div class="login-form">
				<div class="logo">
					<!--					<img src="@img/main/logo_2x.png" alt="" />-->
				</div>
				<div class="login">
					<div class="lt">欢迎登录</div>
					<el-form ref="ruleFormRef" :model="loginForm" :rules="loginRules" @submit.prevent>
						<el-form-item prop="username">
							<el-input v-model="loginForm.username" placeholder="请输入账号" />
						</el-form-item>
						<el-form-item prop="password">
							<el-input v-model="loginForm.password" type="password" placeholder="请输入密码" />
						</el-form-item>
						<el-form-item prop="code">
							<el-row class="w-full">
								<el-col :span="16" :style="{ paddingRight: '16px' }">
									<el-input
										v-model="loginForm.code"
										placeholder="请输入验证码"
										@keyup.enter="handleLogin(ruleFormRef)"
									>
									</el-input>
								</el-col>
								<el-col :span="8" class="flex items-center justify-center pl-2">
									<img :src="codeUrl" class="vImg" @click="refreshCode" />
								</el-col>
							</el-row>
						</el-form-item>
						<el-form-item>
							<el-checkbox v-model="loginForm.rememberMe" label="记住密码" />
						</el-form-item>
						<el-form-item>
							<el-button :loading="loading" type="primary" @click="handleLogin(ruleFormRef)"
								>登录</el-button
							>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<!--			<div class="bottom">2024版权所有(C) 武汉珞珈众恒遥感数据科技有限公司</div>-->
		</div>
	</div>
</template>

<script setup lang="ts">
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
// @ts-ignore
import Cookies from "js-cookie";
import { useUserStore } from "@/store";
import { setToken } from "@/utils/auth";
import { getCaptchaImage, login, getInfo } from "@/api/user/index";

const loginForm = ref({
	username: "",
	password: "",
	rememberMe: false,
	code: "",
	uuid: "",
});
const loginRules = {
	username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
	password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
	code: [{ required: true, trigger: "blur", message: "请输入验证码" }],
};
let router = useRouter();
const loading = ref(false);
const ruleFormRef = ref<FormInstance>();
const userStore = useUserStore();
const handleLogin = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			loading.value = true;
			// 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
			if (loginForm.value.rememberMe) {
				Cookies.set("username", loginForm.value.username, { expires: 30 });
				Cookies.set("password", loginForm.value.password, {
					expires: 30,
				});
				Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
			} else {
				// 否则移除
				Cookies.remove("username");
				Cookies.remove("password");
				Cookies.remove("rememberMe");
			}
			let data = {
				username: loginForm.value.username,
				password: loginForm.value.password,
				code: loginForm.value.code,
				uuid: loginForm.value.uuid,
			};
			console.log(data);
			let res = await login(data);
			if (res.code !== 200) {
				console.log(res);

				refreshCode();
				loading.value = false;
				return;
			}
			setToken(res.token);
			// 获取用户信息
			let userRes = await getInfo();
			let userInfo = userRes.user;
			console.log(userInfo);
			userStore.setInfo({
				userName: userInfo.userName,
				nickName: userInfo.nickName,
				userCode: userInfo.userCode,
				userId: userInfo.userId,
				userRole: userRes.permissions[0],
				ftpInfo:
					userRes.ftp.protocolType + "://" + userRes.ftp.serverIp + ":" + userRes.ftp.serverPort,
				ftpPwd: userInfo.ftpPwd,
			});
			router.push("main");
		} else {
			ElMessage.error("请检查输入是否正确");
			console.log("error submit!", fields);
		}
		loading.value = false;
	});
};
/* 刷新验证码 */
const codeUrl = ref("");
const refreshCode = async () => {
	let res = await getCaptchaImage();
	codeUrl.value = "data:image/gif;base64," + res.img;
	loginForm.value.uuid = res.uuid;
};
onMounted(async () => {
	refreshCode();
	// 根据cookie中是否有用户名和密码来设置初始化的值
	if (Cookies.get("rememberMe")) {
		loginForm.value.username = Cookies.get("username") || "";
		loginForm.value.password = Cookies.get("password") || "";
		loginForm.value.rememberMe = Cookies.get("rememberMe") === "true";
	}
});
</script>

<style scoped lang="scss">
@import "@/index.scss";
.login-contain {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	.top {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 56px;
		.title {
			width: 490px;
		}
	}
	.bottom {
		@apply absolute bottom-10 m-auto w-full text-center;
		font-size: 14px;
		color: rgba(255, 255, 255, 0.6);
	}
	.main {
		@apply flex h-full flex-col items-center;
		margin: auto;
		background: url("@/assets/images/login_bg.png") center top no-repeat;
		padding-top: 100px;
		background-size: 100% 100%;
		.login-form {
			@apply relative;
			.logo {
				@apply absolute left-0 right-0 top-9 m-auto;
				width: 122px;
			}
			width: 524px;
			height: 615px;
			background: url("@/assets/images/login_form_bg.png") center top no-repeat;
		}
		.login {
			margin-top: 136px;
			display: flex;
			flex-direction: column;
			align-items: center;
			.lt {
				width: 433px;
				margin-bottom: 27px;
				@include art-font(24px, #ffffff);
			}
			.el-form {
				.el-form-item {
					width: 433px;
					margin-bottom: 24px;
					&:last-child {
						margin-bottom: 0;
					}
					.el-input {
						height: 56px;
						font-size: 18px;
						--el-input-placeholder-color: #88909b;
						--el-input-text-color: #ffffff;
						--el-input-bg-color: #112349;
						--el-input-border: 1px solid #112349;
						--el-input-border-color: #112349;
						--el-input-hover-border-color: rgba(0, 149, 255, 0.7);
						--el-input-focus-border-color: #0095ff;
						:deep(.el-input__inner) {
							height: 54px;
						}
					}
					.vImg {
						// width: 138px;
						// height: 100%;
						cursor: pointer;
					}
					.el-checkbox {
						--el-checkbox-font-size: 16px;
						--el-checkbox-input-height: 16px;
						--el-checkbox-input-width: 16px;
						--el-checkbox-bg-color: unset;
						--el-checkbox-text-color: #ffffff;
						:deep(.el-checkbox__inner::after) {
							transition: unset;
						}
						&.is-checked :deep(.el-checkbox__inner::after) {
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%) rotate(45deg) scaleY(1);
						}
					}
					.el-button--primary {
						width: 100%;
						height: 56px;
						font-size: 20px;
						font-weight: 500;
						color: #ffffff;
						background: linear-gradient(180deg, #007bff 0%, #25baff 100%);
						border: 0;
						&:active,
						&:hover {
							background: linear-gradient(180deg, #007bff 0%, #5bcbff 100%);
						}
					}
				}
			}
		}
	}
}
</style>
